<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS组件 - SimpleeUI - 上海同道前端UI库</title>
	<script src="js/prettify.js"></script>
	<link rel="stylesheet" href="css/simplee-debug.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body onload='prettyPrint()'>
	<div class="header">
		<div class="container">
			<div class="grid grid-4 first logo"><a href="index.html">SimpleeUI</a></div>
			<div class="grid grid-11">
				<ul class="menu inline">
					<li><a href="index.html">首页</a></li>
					<li><a href="css.html">CSS组件</a></li>
					<li><a href="javascript.html">JS插件</a></li>
					<li><a href="standard.html">使用规范</a></li>
				</ul>
			</div>
			<div class="grid grid-5 last"><a href="mailto:gaom19900925@gmail.com">@_Simplee_</a></div>
		</div>
	</div>
	<div class="content clearfix">
		<div class="container">
			<div class="grid grid-20 base">
				<h3>JS组件</h3>
				<table class="table demo">
					<tr>
						<td><a href="#modal">Modals(模态弹窗)</a></td>
						<td><a href="#dorpdown">Dorpdowns(下拉菜单)</a></td>
						<td><a href="#tabs">Tabs(标签切换)</a></td>
						<td><a href="#tooltips">Tooltips(工具提示)</a></td>
					</tr>
					<tr>
						<td><a href="#alert">Alert(警告框)</a></td>
						<td><a href="#accordion">Accordion(手风琴)</a></td>
						<td><a href="#slide">Slide(幻灯轮播)</a></td>
						<td><a href="#backtotop">BackToTop(返回顶部)</a></td>
					</tr>
					<tr>
						<td><a href="#images">Images(图片)</a></td>
						<td><a href="#navigation">Navigation(导航)</a></td>
						<td><a href="#tag">Tag(标签)</a></td>
						<td><a href="#alert">Alert(警告框)</a></td>
					</tr>
				</table>
			</div>
			<div class="workplace grid grid-20">
				<h4 id="modal">Modals(模态弹窗)</h4>
					<div class="document-box">
						<h4>一、演示</h4>
						<button class="button button-error" type="button" data-toggle="modal" data-target="#myModal">查看DEMO</button>
						<div class="modal fade hide" id="myModal">
							<h4 class="modal-title">标题栏</h4>
							<a class="close" data-dismiss="modal" href="###">&times;</a>
							<div class="modal-content">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
							</div>
						</div>
						<h4>二、调用方法</h4>
						<h4>通过JavaScript</h4>
						<pre class="prettyprint">$('#myModal').modal(options)</pre>
						<h4>通过data属性</h4>
						<p class="text-error">无需编写JavaScript代码即可生成一个对话框。在一个主控元素，例如按钮，上设置<code>data-toggle="modal"</code>，然后再设置<code>data-target="#弹窗ID"</code> 或<code>href="#弹窗ID"</code> 用以指向某个将要被启动的对话框。</p>
						<pre class="prettyprint">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;查看DEMO&lt;/button&gt;
&lt;a href="#myModal" data-toggle="modal"&gt;查看DEMO&lt;/a&gt;</pre>
						<h4>三、可选项</h4>
						<p class="text-error">通过JavaScript代码或data属性传递以下参数。针对data属性，可将选项名称放在<code>data-</code>字符串后，例如：<code>data-backdrop=""</code></p>
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>名称</th>
									<th>类型</th>
									<th>默认值</th>
									<th>描述</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>backdrop</td>
									<td>boolean</td>
									<td>true</td>
									<td>当 options 中设置<code>backdrop: 'static' </code>时，点击背景的时候，不会关掉弹出框。设置为 false 的时候是不显示背景，不要混淆。</td>
								</tr>
								<tr>
									<td>keyboard</td>
									<td>boolean</td>
									<td>true</td>
									<td>是否允许用 Esc 键来关掉弹出框。</td>
								</tr>
								<tr>
									<td>show</td>
									<td>boolean</td>
									<td>true</td>
									<td>初始化时显示弹窗。</td>
								</tr>
							</tbody>
						</table>
						<h4>四、可监听事件</h4>
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>事件</th>
									<th>描述</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>show</td>
									<td>使用<code>show</code>显示弹出层的时候，事件被触发。</td>
								</tr>
								<tr>
									<td>shown</td>
									<td>当弹出层可见的时候，事件被触发。不一定是由<code>show</code>触发，可能是<code>toggle</code></td>
								</tr>
								<tr>
									<td>hide</td>
									<td>使用<code>hide</code>隐藏弹出层的时候，事件被触发。</td>
								</tr>
								<tr>
									<td>hidden</td>
									<td>当弹出层可见的时候，事件被触发。不一定是由<code>hide</code>触发，可能是<code>toggle</code></td>
								</tr>
							</tbody>
						</table>
						<pre class="prettyprint">
// 事件示例代码
$('#myModal').on('hidden', function () {

  // Do Something…
  
})</pre>
					</div>
					<h4 id="dorpdown">Dorpdowns(下拉菜单)</h4>
					<div class="document-box">
						<h4>一、演示</h4>
						<div class="dropdown">
							<button type="button" data-toggle="dropdown" class="button button-error" data-target="myDropdown">新闻中心</button>
							<ul class="dropdown-menu">
									<li><a href="#">行业资讯</a></li>
									<li><a href="#">律所动态</a></li>
									<li><a href="#">通知公告</a></li>
							</ul>
						</div>
						<h4>二、调用方法</h4>
						<h4>通过Javascript</h4>
						<pre class="prettyprint">$('.dropdown-toggle').dropdown()</pre>
						<h4>通过data属性</h4>
						<p class="text-error">在触发下拉框需要添加<code>data-target="#
							下拉框ID"</code>或<code>href="下拉框ID"</code>来指定下拉框。如：</p>
						<pre class="prettyprint">
&lt;div class="dropdown"&gt;
  &lt;button type="button" data-toggle="dropdown" class="button button-error" data-target="myDropdown"&gt;新闻中心&lt;/button&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;行业资讯&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;律所动态&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;通知公告&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</pre>
					</div>
					<h4 id="tabs">Tabs(标签切换)</h4>
					<div class="document-box">
						<h4>一、演示</h4>
						<div class="tab">
									<ul class="tab-title clearfix">
										<li class="tab-title-item first active"><a href="#item1" data-toggle="tab">标签一</a></li>
										<li class="tab-title-item"><a href="#item2" data-toggle="tab">标签二</a></li>
										<li class="tab-title-item"><a href="#item3" data-toggle="tab">标签三</a></li>
										<li class="tab-title-item"><a href="#item3" data-toggle="tab">标签四</a></li>
									</ul>
									<div class="tab-content clearfix">
										<div class="tab-content-pane active" id="item1">
											标签一内容
										</div>
										<div class="tab-content-pane" id="item2">
											标签二内容
										</div>
										<div class="tab-content-pane" id="item3">
											标签三内容
										</div>
										<div class="tab-content-pane" id="item4">
											标标签四内容
										</div>
									</div>
								</div>
						<h4>二、调用方法</h4>
						<h4>通过Javascript</h4>
						<pre class="prettyprint">$('#myTab').tab('show')</pre>
						<h4>通过data属性</h4>
						<p class="text-error">在触发点添加<code>data-toggle="tab"</code>自动触发 Tab，添加<code>data-target="#对应Tab内容的ID"</code>或者<code>href="#对应Tab内容的ID"</code>来指定对应的 Tab 内容显示。</p>
						<pre class="prettyprint">
&lt;div class="tab"&gt;
  &lt;ul class="tab-title clearfix"&gt;
    &lt;li class="tab-title-item first active"&gt;&lt;a href="#item1" data-toggle="tab"&gt;标签一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="tab-title-item"&gt;&lt;a href="#item2" data-toggle="tab"&gt;标签二&lt;/a&gt;&lt;/li&gt;
    ...
  &lt;/ul&gt;
  &lt;div class="tab-content clearfix"&gt;
    &lt;div class="tab-content-pane active" id="item1"&gt;
      标签一内容
    &lt;/div&gt;
    &lt;div class="tab-content-pane" id="item2"&gt;
      标签二内容
    &lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>
						<h4>三、可监听事件</h4>
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>事件</th>
									<th>描述</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>show</td>
									<td>显示一个新的 tab 前触发此事件。可以用<code>event.target</code>和<code>event.relatedTarget</code>来追踪激活的 tab 和被关闭的 tab (如果有的话) 。</td>
								</tr>
								<tr>
									<td>shown</td>
									<td>显示一个新的 tab 后触发此事件。可以用<code>event.target</code>和<code>event.relatedTarget</code>来追踪激活的 tab 和被关闭的 tab (如果有的话) 。</td>
								</tr>
							</tbody>
						</table>
						<pre class="prettyprint">
// 事件示例代码
$('a[data-toggle="tab"]').on('shown', function (e) {
    e.target // 被激活的 tab
    e.relatedTarget // 上一个激活（已经关闭）的 tab
})</pre>
					</div>
					<h4 id="tooltips">Tooltips(工具提示)</h4>
					<div class="document-box">
						<h4>一、演示</h4>
						<ul class="unstyled inline tooltip-demo">
							<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltips Top</a></li>
							<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltips Bottom</a></li>
							<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltips Left</a></li>
							<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltips Right</a></li>
						</ul>
						<h4>二、调用方法</h4>
						<p class="text-error">该插件暂时只支持IE8+浏览器！出于性能方面原因 Tooltip 插件使用时需要进行初始化操作，方法如下：</p>
						<pre class="prettyprint">$("#ID").tooltip(options);</pre>
					</div>
					<h4 id="alert">Alert(警告框)</h4>
					<div class="document-box">
						<h4>一、演示</h4>
						<div class="alert fade in">
								<div class="alert-content">
									<h4>注意：</h4>请保护好您的帐号及密码！为了您的帐户安全，请定期修改密码！如果出现无法登陆或者其他异常情况，请第一时间联系我们！
								</div>
								<a href="#" data-dismiss="alert" class="close">&times;</a>
						</div>
						<h4>二、调用方法</h4>
						<h4>通过Javascript</h4>
						<pre class="prettyprint">$(".alert").alert()</pre>
						<h4>通过data属性</h4>
						<pre>&lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt;</pre>
						<h4>三、可监听事件</h4>
						<table class="table table-bordered table-striped">
	            <thead>
	             <tr>
	               <th>事件</th>
	               <th>描述</th>
	             </tr>
	            </thead>
	            <tbody>
	             <tr>
	               <td>close</td>
	               <td>在框体被关闭的瞬间触发。</td>
	             </tr>
	             <tr>
	               <td>closed</td>
	               <td>在框体关闭，CSS 动画完成后触发。</td>
	             </tr>
	            </tbody>
	        	</table>
	        	<pre class="prettyprint">
// 事件示例代码
$('#my-alert').bind('closed', function () {
    // do something…
})</pre>
					</div>
					<h4 id="accordion">Accordion(手风琴)</h4>
					<div class="document-box">
						<h4>一、演示</h4>
					</div>
				<!-- END -->
			</div>
		</div>
	</div>
	<div class="footer">
		HOMOLO.COM | &copy; 2013 Built By SimpleeUI. All Right Reserved
	</div> 
<script src="js/jquery.js"></script>
<script src="js/plugins.js"></script>
<script src="js/bootstrap.js"></script>
<script>
 $('.tooltip-demo').tooltip({
    selector: "a[data-toggle=tooltip]"
  })
</script>
</body>
</html>
